<template>
	<view class="detail-content" v-if="loadEnd">
		<!-- 头部 -->
		<view class="user-info">
			<image src="/static/forum/circleBg.png" class="banner"></image>
			<view class="main" v-for="item in hdetails" :key="item.id">
				<view class="left">
					<view class="user-avatar"><image :src="item.image"></image></view>
					<view class="user-title">
						<view class="user-name">{{ item.title }}</view>
						<view class="user-like">{{ item.desc }}</view>
					</view>
				</view>
				<view class="right">
					<view class="like-button" @click.stop="() => attention(item.follow_status)">{{ item.follow_status == 0 ? '关注' : '取消关注' }}</view>
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="center-content">
			<!-- 标题 -->
			<view class="nav-cont">
				<view class="nav-data" v-for="item in nav_Data" :key="item.id">
					<view class="data-title" :class="{ active: newIndex == item.id }" @click="changeTitle(item.id)">{{ item.title }}</view>
				</view>
			</view>
			<!-- 帖子 -->
			<view class="main-cont" v-if="postList.length"><mainList :show-data="postList" @likePosts="likePosts"></mainList></view>
			<view class="" style="margin: 10rpx 0;color: #656565;font-size: 26rpx;text-align: center;" v-if="postList.length != 0 && !hasMore">没有更多了~</view>
		</view>
		<view class="empty" v-if="!postList.length">
			<view><image src="/static/empty.png" class="emptyi" mode="aspectFit"></image></view>
			<view class="emptyt"><text>暂无相关帖子~</text></view>
		</view>
		<!-- 发布按钮 -->
		<view class="gohome" @click="goRelease"><image src="/static/forum/reabutton.png" mode="aspectFit"></image></view>
	</view>
</template>

<script>
import mainList from '@/pages/Component/forum/component/main-list/mainList.vue'
import ikz from '@/pages/Common/tools.js'
export default {
	components: {
		mainList,
	},
	data() {
		return {
			loadEnd: false,
			//父页面id
			fatherid: 0,
			newIndex: 0,
			page: 1,
			limit: 10,
			hasMore: false,
			postList: [],
			//头部详情数据
			hdetails: {},
			nav_Data: [
				{
					id: 0,
					title: '最新',
				},
				{
					id: 1,
					title: '推荐',
				},
			],
		}
	},
	onLoad(option) {
		// this.postList = uni.getStorageSync("user_info")
		this.fatherid = option.id || ''
		this.getHeadDetails()
		this.getPostDetails()
	},
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getPostDetails()
		}
	},
	onPullDownRefresh() {
		console.log('123')
		this.page = 1
		this.postList = []
		this.getPostDetails()
		uni.stopPullDownRefresh()
	},
	methods: {
		// 去发布帖子
		goRelease() {
			uni.reLaunch({
				url: '/pages/Component/forum/Program/release/release',
			})
		},
		//获取头部详情
		getHeadDetails() {
			let path = '/xyb/posts/posts_circle/circle_details'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				id: this.fatherid,
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					this.hdetails = res.data
				}
			})
		},
		//获取帖子详情
		getPostDetails() {
			let path = '/xyb/posts/posts_circle/circle_list'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				id: this.fatherid,
				recommend: this.newIndex,
				page: this.page,
				limit: this.limit,
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					let postList = []
					postList = res.data.data.data
					postList.forEach(el => {
						if (el.images != '') {
							// el.images = el.images.split(',')
							el.imagesNum = el.images.length
							if (el.images.length > 3) {
								el.images.slice(0, 3)
							}
						}
					})
					this.postList = this.page == 1 ? postList : [...this.postList, ...postList]
					this.hasMore = this.page < res.data.data.count / this.limit ? true : false
				}
				this.loadEnd = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		// 关注/取关频道
		attention(states) {
			let data = {
				token: uni.getStorageSync('local_user_session'),
				circle_id: this.fatherid,
			}
			let path = ''
			if (states == 0) {
				path = '/xyb/posts/posts_circle/follow'
				ikz.requestPost(path, data, res => {
					if (res.statusCode == 200) {
						this.getHeadDetails()
						uni.showToast({
							title: '关注成功',
							icon: 'none',
						})
						let pages = getCurrentPages() //获取所有页面栈实例列表
						let prevPage = pages[pages.length - 2] //上一页页面实例
						if (prevPage.$vm.circleList) {
							prevPage.$vm.circleList.forEach(el => {
								if (el.id == this.fatherid) {
									el.follow_status = 1
								}
							})
						}
					}
				})
			} else {
				uni.showModal({
					title: '确认取消关注此频道',
					confirmColor: '#F00',
					cancelColor: '#999',
					success: res => {
						if (res.confirm) {
							path = '/xyb/posts/posts_circle/follow_del'
							ikz.requestPost(path, data, res => {
								if (res.statusCode == 200) {
									this.getHeadDetails()
									uni.showToast({
										title: '取消关注成功',
										icon: 'none',
									})
									let pages = getCurrentPages() //获取所有页面栈实例列表
									let prevPage = pages[pages.length - 2] //上一页页面实例
									if (prevPage.$vm.circleList) {
										prevPage.$vm.circleList.forEach(el => {
											if (el.id == this.fatherid) {
												el.follow_status = 0
											}
										})
									}
								}
							})
						}
					},
				})
			}
		},
		// 切换分类
		changeTitle(id) {
			this.newIndex = id
			uni.showLoading({
				mask: true,
				title: '正在加载中',
			})
			this.getPostDetails()
		},
		// 点赞或取消点赞帖子
		likePosts(id, status) {
			let path = ''
			if (status == 0) {
				path = '/xyb/posts/posts/give'
			} else {
				path = '/xyb/posts/posts/give_del'
			}
			let data = {
				token: uni.getStorageSync('local_user_session'),
				posts_id: id,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					this.postList.forEach(el => {
						if (el.id == id) {
							if (el.give_status == 0) {
								el.give_status = 1
								el.give++
							} else {
								el.give_status = 0
								el.give--
							}
						}
					})
					let title = ''
					if (status == 0) {
						title = '点赞成功'
					} else {
						title = '取消点赞'
					}
					uni.showToast({
						title,
						icon: 'none',
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
	page {
		background: #f6f7fb;
	}
.detail-content {
	.user-info {
		position: relative;
		display: flex;
		width: 100%;
		height: 206rpx;

		.banner {
			position: absolute;
			width: 100%;
			height: 250rpx;
		}

		.main {
			margin-top: 30rpx;
			position: absolute;
			display: flex;
			width: 92%;
			justify-content: space-between;
			align-items: center;
			padding: 0 26rpx;

			.left {
				display: flex;

				.user-avatar {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
						border: 6rpx solid #ffffff;
					}
				}

				.user-title {
					flex: 1;
					margin-left: 40rpx;
					height: 120rpx;
					color: #ffffff;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.user-name {
						font-size: 36rpx;
					}

					.user-like {
						font-size: 26rpx;
					}
				}
			}

			.right {
				.like-button {
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #fb7a26;
					background: #fff2d9;
				}
			}
		}
	}

	.center-content {
		box-sizing: border-box;
		position: relative;
		background: #ffffff;
		padding: 5rpx 26rpx;
		border-radius: 60rpx 60rpx 0 0;
		background-color: #f8f8f8;

		.nav-cont {
			width: 100%;
			padding: 20rpx;
			display: flex;
			align-items: flex-end;

			.nav-data {
				margin-right: 18rpx;

				.data-title {
					font-size: 24rpx;
					color: #555555;

					&.active {
						font-size: 32rpx;
						color: #000000;
						font-weight: 600;
					}
				}
			}
		}
	}

	.gohome {
		position: fixed;
		top: 70%;
		right: 36rpx;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 20rpx auto;

	.emptyi {
		margin-top: 50rpx;
		height: 300rpx;
	}

	.emptyt {
		margin-top: 15rpx;
		color: #666;
	}
}
</style>
